<template>
  <a-modal
    :visible="batchEditVisible"
    :destroyOnClose="true"
    :width="440"
    title="批量编辑"
    @ok="batchEditConfirm"
    @cancel="batchEditVisible = false"
  >
    <div style="margin: 0 auto">
      <div class="pv12" style="display: flex; align-items: center">
        <div class="mr8 fw500" style="width: 100px; flex-shrink: 0">合同起始时间</div>
        <a-date-picker
          v-model="contractStartTime"
          :allowClear="true"
          :disabledDate="disabledStartDate"
          placeholder="合同起始时间"
          style="width: 284px"
          @change="onChangeStart"
        />
      </div>
      <div class="pv12" style="display: flex; align-items: center">
        <div class="mr8 fw500" style="width: 100px; flex-shrink: 0">合同期限</div>
        <a-select
          v-model="contractExpire"
          :allowClear="true"
          :disabled="contractType === 'laborContractUnlimit'"
          placeholder="合同期限"
          style="width: 216px; margin-right: 12px"
          @change="onChangeNum"
        >
          <a-select-option v-for="(time, timeIndex) in 11" :key="timeIndex + 1" :value="timeIndex + 1">
            {{ timeIndex + 1 }}
          </a-select-option>
        </a-select>
        <a-select
          v-model="timelimitType"
          :allowClear="true"
          :disabled="contractType === 'laborContractUnlimit'"
          placeholder="单位"
          style="width: 86px"
          @change="onChangeUnit"
        >
          <a-select-option v-for="(time, timeIndex) in rightTime" :key="timeIndex + 1" :value="timeIndex + 1">
            {{ time }}
          </a-select-option>
        </a-select>
      </div>
      <div class="pv12" style="display: flex; align-items: center">
        <div class="mr8 fw500" style="width: 100px; flex-shrink: 0">合同结束时间</div>
        <a-date-picker
          v-model="contractEndTime"
          :allowClear="true"
          :disabled="contractType === 'laborContractUnlimit'"
          :disabledDate="disabledEndDate"
          placeholder="合同结束时间"
          style="width: 284px"
          @change="onChangeEnd"
        />
      </div>
      <div class="pv12" style="display: flex; align-items: center">
        <div class="mr8 fw500" style="width: 100px; flex-shrink: 0">合同类型</div>
        <a-select v-model="contractType" :allowClear="true" placeholder="合同类型" style="width: 284px" @change="onChangeType">
          <a-select-option v-for="item in contractTypeList" :key="item.key" :value="item.key">
            {{ item.value }}
          </a-select-option>
        </a-select>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { contractTypeList } from "../funcs";

const rightTime = ["年", "月"];
const rightTimeEn = ["years", "months"];

export default {
  name: "",
  components: {},
  mixins: [],
  props: ["value"],
  data() {
    return {
      batchEditVisible: false,
      rightTime,
      contractTypeList,
      contractStartTime: undefined,
      contractEndTime: undefined,
      contractType: undefined,
      contractExpire: undefined,
      timelimitType: undefined
    };
  },
  computed: {},
  watch: {
    value: {
      handler(val) {
        if (val !== this.batchEditVisible) {
          this.batchEditVisible = val;
        }
        if (val) {
          this.contractStartTime = undefined;
          this.contractEndTime = undefined;
          this.contractType = undefined;
          this.contractExpire = undefined;
          this.timelimitType = undefined;
        }
      },
      immediate: true
    },
    batchEditVisible(newVal) {
      this.$emit("input", newVal);
      this.$emit("change", newVal);
    }
  },
  created() {},
  mounted() {},
  methods: {
    disabledStartDate(val) {
      const endValue = this.contractEndTime;
      if (!val || !endValue) {
        return false;
      }
      return val.valueOf() > endValue.valueOf();
    },
    disabledEndDate(val) {
      const startValue = this.contractStartTime;
      if (!val || !startValue) {
        return false;
      }
      return val.valueOf() < startValue.valueOf();
    },
    batchEditConfirm() {
      const params = {};
      if (this.contractStartTime) {
        params["contractStartTime"] = this.contractStartTime;
      }
      if (this.contractEndTime) {
        params["contractEndTime"] = this.contractEndTime;
      }
      if (this.contractType) {
        params["contractType"] = this.contractType;
      }
      if (this.contractExpire) {
        params["contractExpire"] = this.contractExpire;
      }
      if (this.timelimitType) {
        params["timelimitType"] = this.timelimitType;
      }
      this.$emit("confirm", params);
      this.batchEditVisible = false;
    },
    onChangeStart(val) {
      this.contractStartTime = val;
      if (this.contractType !== "laborContractUnlimit" && this.timelimitType && this.contractExpire && val) {
        const temp = this.contractStartTime.clone();
        this.contractEndTime = temp.add(this.contractExpire, rightTimeEn[this.timelimitType - 1]).add(-1, "days");
      }
    },
    onChangeNum(val) {
      this.contractExpire = val;
      if (this.contractStartTime && this.timelimitType && val) {
        const temp = this.contractStartTime.clone();
        this.contractEndTime = temp.add(this.contractExpire, rightTimeEn[this.timelimitType - 1]).add(-1, "days");
      }
    },
    onChangeUnit(val) {
      this.timelimitType = val;
      if (this.contractStartTime && this.contractExpire && val) {
        const temp = this.contractStartTime.clone();
        this.contractEndTime = temp.add(this.contractExpire, rightTimeEn[this.timelimitType - 1]).add(-1, "days");
      }
    },
    onChangeEnd(val) {
      this.contractEndTime = val;
    },
    onChangeType(val) {
      this.contractType = val;
      if (val === "laborContractUnlimit") {
        this.contractEndTime = undefined;
        this.contractExpire = undefined;
        this.timelimitType = undefined;
      }
    }
  }
};
</script>
<style lang="scss"></style>
